<template>
  <view
    v-if="show"
    class="t-notice-bar flex-row align-center"
    :class="[type]"
  >
    <view class="flex-row flex-center" style="margin-right:6rpx;">
	  <image v-if="type == 'error'" class="icon" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/user_uniapp/static/error-flag-icon.png" />
      <image v-else class="icon" :src="`https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/icon_hint_${type}.png`" />
    </view>
    <view class="t-direction-row flex-item">
      <view id="t-notice-box" class="t-notice-box">
        <view
          id="t-notice-content"
          class="t-notice-content"
          :style="{
            animationDuration: animationDuration,
            animationPlayState: animationPlayState,
          }"
        >
          <text class="t-notice-text" :class="[type+'-text']" @tap="click">{{ showText }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    // 显示的内容，数组
    list: {
      type: Array,
      default() {
        return []
      }
    },
	imageFlahe: {
		type: Boolean,
		default:false
	},
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: true
    },
    // 是否显示
    show: {
      type: Boolean,
      default: true
    },
    // 类型： waring-警告   error-危险  success-成功
    type: {
      type: String,
      default: 'waring'
    },
    // 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
    speed: {
      type: [Number, String],
      default: 140
    }
  },
  data() {
    return {
      textWidth: 0, // 滚动的文字宽度
      animationDuration: '10s', // 动画执行时间
      animationPlayState: 'paused', // 动画的开始和结束执行
      showText: '' // 显示的文本
    }
  },
  watch: {
    list: {
      immediate: true,
      handler(val) {
        this.showText = val.join('，')
        this.$nextTick(() => {
          this.initSize()
        })
      }
    },
    speed(val) {
      this.initSize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initSize()
    })
  },
  methods: {
    initSize() {
      const query = []
      const textWidth = 0
      const textQuery = new Promise((resolve, reject) => {
        uni
          .createSelectorQuery()
          .in(this)
          .select(`#t-notice-content`)
          .boundingClientRect()
          .exec((ret) => {
            this.textWidth = ret[0].width
            resolve()
          })
      })
      query.push(textQuery)
      Promise.all(query).then(() => {
        this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`
        this.animationPlayState = 'paused'
        setTimeout(() => {
          if (this.autoplay) this.animationPlayState = 'running'
        }, 10)
      })
    },
    // 点击通告栏
    click(index) {
      this.$emit('click')
    },
    // 点击关闭按钮
    close() {
      this.$emit('close')
    },
    // 点击更多箭头按钮
    getMore() {
      this.$emit('getMore')
    }
  }
}
</script>

<style scoped lang="scss">

.t-notice-bar {
  padding: 0 30rpx;
  overflow: hidden;
  color:#fff;
  height: 60rpx;
  border-radius: 14rpx;
}

.icon{
  width:26rpx;
  height:26rpx;
}

.waring {
  background: $color-warning-fade;
  border: 2rpx solid $color-warning;
}

.error {
  border: 2rpx solid $color-error;
  background: $color-error-fade;
}

.success{
  background: $color-success-fade;
  border: 2rpx solid $color-success;
}

.waring-text{
  color:$color-warning;
}

.error-text{
  color:$color-error;
}

.success-text{
  color:$color-success;
}

.t-direction-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.t-notice-box {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.t-notice-content {
  animation: loop-animation 10s linear infinite both;
  text-align: right;
  padding-left: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

}

.t-notice-text {
  font-size: 26rpx;
  word-break: keep-all;
  white-space: nowrap;
}

@keyframes loop-animation {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
</style>
